<template>
	<view class="container">
		<view class="head">
			<!-- 搜索栏 -->
			<view class="search-bar">
				<view class="item">
					<image src="/static/search-2.png" class="icon-search" />
					<input class="search-input" placeholder="搜索记录" />
				</view>
				<text class="search-btn">搜索</text>
			</view>

			<!-- 筛选标签 -->
			<view class="tabs">
				<text :class="['tab', activeTab === 0 ? 'active' : '']" @click="activeTab = 0">全部</text>
				<text :class="['tab', activeTab === 1 ? 'active' : '']" @click="activeTab = 1">待接单</text>
				<text :class="['tab', activeTab === 2 ? 'active' : '']" @click="activeTab = 2">处理中</text>
				<text :class="['tab', activeTab === 3 ? 'active' : '']" @click="activeTab = 3">已完成</text>
				<text :class="['tab', activeTab === 4 ? 'active' : '']" @click="activeTab = 4">已超时</text>
			</view>
		</view>

		<!-- 工单列表 -->
		<view class="order-list">
			<view class="order-card" v-for="item in filteredOrders" :key="item.repair_id">
				<view>
					<view class="order-header">
					<view class="order-type">
						<view class="dot" :style="{ background: item.color }"></view>
						<text class="order-title">{{ item.repair_type }}</text>
					</view>
					<view class="order-status" :class="item.statusClass">{{ item.statusText }}</view>
					<uni-icons type="more-filled" size="18" />
				</view>
				<view class="order-info">
					<view class="info-row"><text class="info-row-bold">报修时间：</text>{{ item.sub_date }}</view>
					<view class="info-row"><text class="info-row-bold">报 修 人：</text>{{ item.sub_name }} <text
							class="phone">{{ item.sub_tel }}</text></view>
					<view class="info-row"><text class="info-row-bold">报修地点：</text>{{ item.repair_address }}</view>
					<view class="info-row"><text class="info-row-bold">报修详情：</text>{{ item.repair_content }}</view>
					<view v-if="item.status !== 'pending'" class="info-row"><text class="info-row-bold">处 理 人：</text>{{ item.handler_name }}</view>
					<view v-if="item.status === 'done'" class="info-row"><text class="info-row-bold">完成时间：</text>{{ item.end_date }}</view>
				</view>

				<!-- 警告信息 -->
				<view v-if="item.isOvertime" class="order-warning">
					<image src="/static/warn.png" class="icon-warn" />
					<text class="warning-text">工单已超时，请尽快处理！</text>
				</view>

				<!-- 评价 -->
				<view v-if="item.comment" class="order-comment">
					<view class="comment-header">
						<text class="comment-title">维修师傅很认真</text>
						<text class="comment-date">{{ item.comment.end_date }}</text>
						<text class="comment-user">{{ item.comment.sub_name }}</text>
					</view>
					<view class="star-container">
						<text class="comment-score">星级：</text>
						<text class="star" v-for="i in 5">{{ i <= item.comment.qualityRating ? '★' : '☆' }}</text>
						<text class="comment-score">({{item.comment.qualityRating}}分)</text>
					</view>
					<view class="comment-content">{{ item.comment.feedbackContent }}</view>
				</view>

				<!-- 操作按钮 -->
				<view class="order-actions">
					<!-- 已完成卡片：查看详情、去评价按钮 -->
					<view v-if="item.status === 'done'">
						<button class="btn-primary" @click="goDetail(item.repair_id)">查看详情</button>
						<button class="btn-primary" @click="goComment(item)" v-if="item.comment==null">去评价</button>
					</view>
					
					<!-- 待处理卡片：只保留查看详情按钮 -->
					<view v-if="item.status === 'pending'">
						<button class="btn-primary" @click="goDetail(item.repair_id)">查看详情</button>
					</view>
					
					<!-- 处理中卡片：只保留查看详情按钮 -->
					<view v-if="item.status === 'processing'">
						<button class="btn-primary" @click="goDetail(item.repair_id)">查看详情</button>
					</view>
					
					<!-- 已超时卡片：只保留查看详情按钮 -->
					<view v-if="item.status === 'overtime'">
						<button class="btn-primary" @click="goDetail(item.repair_id)">查看详情</button>
					</view>
				</view>
				</view>
				
			</view>
		</view>
		<!-- 底部导航 -->
		<!-- <view class="bottom-nav">
			<view class="nav-item" v-for="(item, index) in bottomNavs" :key="index"
				@click="goBottomNav(item.url, index)">
				<image :src="currentTab === index ? item.iconActive : item.icon" class="nav-icon" />
				<text :class="['nav-label', currentTab === index ? 'active' : '']">{{ item.label }}</text>
			</view>
		</view> -->
		<CustomBottomNav></CustomBottomNav>
		
	</view>
</template>


<script setup>
	import CustomBottomNav from '../common/tabar.vue';
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import {usePublicStore} from '../../store/public'
	
	const app = getApp();
	
	const userPublic = usePublicStore();

	const activeTab = ref(0); // 当前选中的标签索引

	// 根据 activeTab 的值筛选工单
	const filteredOrders = computed(() => {
		if (activeTab.value === 0) {
			return orders.value; // 全部
		} else if (activeTab.value === 1) {
			return orders.value.filter(order => order.status === 'pending'); // 待处理
		} else if (activeTab.value === 2) {
			return orders.value.filter(order => order.status === 'processing'); // 处理中
		} else if (activeTab.value === 3) {
			return orders.value.filter(order => order.status === 'done'); // 已完成
		} else if (activeTab.value === 4) {
			return orders.value.filter(order => order.status === 'overtime'); // 已完成
		}
	});

	const goDetail = (id) => {
		// 根据工单状态跳转到不同页面
		const order = orders.value.find(item => item.repair_id === id);
		uni.setStorageSync("junmp_order",order)
		if (order) {
			switch (order.status) {
				case 'done':
					uni.navigateTo({
						url: `/pages/order/completed/completed?id=${id}`
					});
					break;
				case 'pending':
					uni.navigateTo({
						url: `/pages/order/pending/pending?id=${id}`
					});
					break;
				case 'processing':
					uni.navigateTo({
						url: `/pages/order/processing/processing?id=${id}`
					});
					break;
				case 'overtime':
					uni.navigateTo({
						url: `/pages/order/overtime/overtime?id=${id}`
					});
					break;
				default:
					uni.navigateTo({
						url: `/pages/order/completed/completed?id=${id}`
					});
			}
		}
	}

	const goComment = (data) => {
		// 跳转到评价页面，假设路径为 /pages/order/comment/comment
		uni.setStorageSync("order",data);
		uni.navigateTo({
			url: `/pages/repair-order/comment/comment`
		});
	};

	const orders  = ref([
		{
		  repair_id: 1,
		  repair_type: '灯管维修',
		  status: 'done',
		  statusText: '已完成',
		  sub_date: '2025-6-6 11:18:44',
		  sub_name: '张老师',
		  sub_tel: '139****5678',
		  repair_address: '教学楼B座306',
		  repair_content: '灯管有3只不亮，2只闪烁',
		  handler_id:'11111',
		  handler_name: '维修部李维修',
		  end_date: '2025-6-6 15:30:22',
		  comment: {
		    sub_name: '张老师',
		    end_date: '2025年6月6日',
			  qualityRating:4,
		    feedbackContent: '维修及时，服务态度很好！'
		  }
		},
		{
			repair_id: 2,
			repair_type: '桌椅维修',
			color: '#F5C242',
			status: 'pending',
			statusText: '待接单',
			statusClass: 'status-pending',
			sub_date: '2025-6-6 11:18:44',
			sub_name: '李老师',
			sub_tel: '139****1234',
			repair_address: '教学楼E座426',
			repair_content: '桌椅损坏',
			handler_name: '维修部李维修',
			end_date: '2025-6-6 15:30:22',
			hand_data: '2025-6-6 14:15:00',
			expectedTime: '2025-6-6 15:00:00',
			comment: null
		},
		{
			repair_id: 3,
			repair_type: '水电维修',
			color: '#4095E5',
			status: 'processing',
			statusText: '处理中',
			statusClass: 'status-processing',
			sub_date: '2025-6-6 11:18:44',
			sub_name: '吕同学',
			sub_tel: '137****9876',
			repair_address: '学生宿舍5公寓201',
			repair_content: '水龙头漏水严重，影响正常使用',
			handler_name: '维修部李维修',
			end_date: '2025-6-6 15:30:22',
			hand_data: '2025-6-6 14:15:00',
			expectedTime: '2025-6-6 15:00:00',
			comment: null
		},
		{
			repair_id: 4,
			repair_type: '门锁故障',
			color: '#FF5A5F',
			status: 'overtime',
			statusText: '已超时',
			statusClass: 'status-overtime',
			sub_date: '2025-6-6 11:18:44',
			sub_name: '赵老师',
			sub_tel: '136****5432',
			repair_address: '图书馆C座',
			repair_content: '电子门锁无法识别门卡',
			handler_name: '维修部李维修',
			end_date: '2025-6-6 15:30:22',
			hand_data: '2025-6-6 14:15:00',
			expectedTime: '2025-6-6 15:00:00',
			comment: null,
			isOvertime: true
		}
	])
	const currentTab = ref(0)
	const bottomNavs = [{
			icon: '/static/home.png',
			iconActive: '/static/home-active.png',
			label: '首页',
			url: '/pages/index/index'
		},
		{
			icon: '/static/order.png',
			iconActive: '/static/order-active.png',
			label: '工单',
			url: '/pages/order/order'
		},
		{
			icon: '/static/check.png',
			iconActive: '/static/check-active.png',
			label: '巡检',
			url: '/pages/check/check'
		},
		{
			icon: '/static/user.png',
			iconActive: '/static/user-active.png',
			label: '我的',
			url: '/pages/user/user'
		}
	]
	// 跳转底部导航
	const goBottomNav = (url, index) => {
		console.log('当前点击的索引:', index);
		currentTab.value = index;
		console.log('更新后的 currentTab:', currentTab.value);
		uni.reLaunch({
			url
		})
	}
	
	const open_receive = ()=>{
		const baseUrl = app.globalData.baseUrl;
			uni.request({
			    url: encodeURI(baseUrl + '/repair/listAndFeek/condition'),
				method:'POST',
			    data: {
					"sub_user_id" : userPublic.getUserInfo().id
			    },
			    header:{
					"X-Tenant-Id": uni.getStorageSync("tenantId"),
					"token" : uni.getStorageSync("token")
				},
			    success: (res) => {
					console.log(res.data)
					orders.value = res.data.data
			    }
			});
	
		}


	// 在页面加载时设置 currentTab 为 1
	onMounted(() => {
		open_receive();
		currentTab.value = 1;
		// // 初始化时保存orders到本地存储
		// uni.setStorageSync('orders', orders.value);
	})
</script>


<style scoped>
	.head {
		background: #fff;
	}

	.container {
		background: #EFEFEF;
		min-height: 100vh;
		padding-bottom: 200rpx;
	}

	/*顶部导航栏*/
	.icon-arrow {
		width: 40rpx;
		height: 40rpx;
		margin-left: 8rpx;
		margin-top: 8rpx;
	}

	/*搜索栏*/
	.search-bar {
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		/* 添加左右内边距 */
		margin: 16rpx 0;
	}

	.item {
		background: #FAFAFA;
		border-radius: 8rpx;
		padding: 16rpx 24rpx;
		/* 调整内边距 */
		flex: 1;
		/* 让搜索框部分占据剩余空间 */
		display: flex;
		align-items: center;
	}

	.icon-search {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.search-input {
		flex: 1;
		border: none;
		background: transparent;
		margin: 0;
		font-size: 30rpx;
		color: #969696;
	}

	.search-btn {
		color: #007aff;
		font-size: 30rpx;
		margin-left: 16rpx;
		background: #fff;
		padding: 10rpx 32rpx;
		/* 调整按钮内边距 */
		border-radius: 8rpx;
		white-space: nowrap;
		/* 防止按钮文字换行 */
	}

	/*筛选标签*/
	.tabs {
		display: flex;
		background: #fff;
		padding: 0 24rpx;
	}

	.tab {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		font-size: 32rpx;
		color: #4F4F4F;
		position: relative;
	}

	.tab.active {
		color: #007aff;
		font-weight: bold;
	}

	.tab.active::after {
		content: '';
		display: block;
		margin: 0 auto;
		width: 48rpx;
		height: 4rpx;
		background: #007aff;
		border-radius: 2rpx;
		margin-top: 8rpx;
	}

	/*工单列表*/
	.order-list {
		padding: 24rpx;
	}

	.order-card {
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 4rpx 16rpx #eee;
		margin-bottom: 32rpx;
		padding: 28rpx;
		margin: 0 14rpx 24rpx 14rpx;
	}

	.order-header {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.order-type {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.dot {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		margin-right: 12rpx;
	}

	.order-title {
		font-weight: bold;
		font-size: 34rpx;
	}

	.order-status {
		padding: 4rpx 20rpx;
		border-radius: 24rpx;
		font-size: 26rpx;
		margin-right: 16rpx;
	}

	.status-done {
		background: #DCFCE7;
		color: #337541;
	}

	.status-pending {
		background: #FEF9C3;
		color: #854D0E;
	}

	.status-processing {
		background: #DBEAFE;
		color: #1E40AF;
	}

	.status-overtime {
		background: #FEE2E2;
		color: #991C1F;
	}

	/*警告信息*/
	.order-warning {
		background: #FEF2F2;
		color: #991C1F;
		border-radius: 16rpx;
		margin-top: 16rpx;
		border: 4rpx solid #FECCCC;
		margin-top: 10rpx;
		padding: 16rpx 30rpx;
		display: flex;
		align-items: center;
	}

	.warning-text {
		font-size: 28rpx;
		font-weight: bold;
	}

	.icon-warn {
		width: 32rpx;
		height: 30rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;
	}

	.order-info {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	.info-row {
		margin-bottom: 4rpx;
		color: #BEBEBE;
		margin-left: 34rpx;
	}

	.info-row-bold {
		font-weight: bold;
	}

	.phone {
		color: #007aff;
		margin-left: 8rpx;
	}

	/*评价*/
	.order-comment {
		background: #ECFDF5;
		border-radius: 16rpx;
		padding: 16rpx 20rpx;
		margin-bottom: 16rpx;
		font-size: 28rpx;
		color: #337541;
		border: 4rpx solid #B6F4D8;
	}

	.comment-header {
		display: flex;
		align-items: center;
		margin: 4rpx 0px;
	}


	.comment-title {
		font-weight: bold;
		margin-right: 16rpx;
	}

	.comment-date {
		color: #9A9A9A;
		font-size: 26rpx;
		margin-left: auto;
		margin-right: 16rpx;
	}

	.comment-user {
		color: #888;
		font-size: 24rpx;
	}

	.comment-stars {
		display: flex;
		align-items: center;
		margin-bottom: 4rpx;
	}

	.star-container {
		display: inline-block;
		position: relative;
	}

	.star {
		color: #FFD700;
		font-size: 32rpx;
		margin-right: 10rpx;
	}

	.comment-score {
		color: #9A9A9A;
		font-size: 26rpx;
	}

	.comment-content {
		color: #337541;
		margin-top: 10rpx;
	}

	.order-actions {
		display: flex;
		gap: 20rpx;
		margin-top: 12rpx;
		margin-left: 49rpx;
		justify-content: flex-end;
	}

	.order-actions > view {
		display: flex;
		gap: 20rpx;
		justify-content: flex-end;
	}

	.btn-primary {
		margin-top: 8rpx;
		flex: 1;
		background: #F2F2F2;
		color: #6C6C6C;
		border-radius: 12rpx;
		font-size: 27rpx;
		border: none;
		padding: 2rpx 24rpx;
		white-space: nowrap;
		min-width: 160rpx;
	}

	.bottom-nav {
	  position: fixed;
	  bottom: 0;
	  padding-bottom: 10rpx;
	  width: 100%;
	  height: 130rpx;
	  background: #fff;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  box-shadow: 0 -2rpx 8rpx #eee;
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.nav-label {
		font-size: 26rpx;
		color: #000;
		margin-top: 4rpx;
	}

	.nav-label.active {
		color: #3D76FF;
	}
</style>